import React from 'react'
import { Row, Col, Form, Input, Typography, Select, Button } from "antd"
import { reg } from '../../utils/validate'
import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons';
import { roleList, toast } from '../../utils/common';
import { observer } from "mobx-react"
import myinfo from '../mobx/info';
import { ajax } from '../../api';
const { Title } = Typography
function Adduser({ history }: any) {
    const [form] = Form.useForm()
    const { userInfo } = myinfo
    const onFinish = async (value: any) => {
        let { code, result }: any = await ajax.register(value)
        if (code == 200) {
            history.push("/main/user/list")
        }
    }
    const onFinishFailed = () => {
        toast.error("请填写有效的用户信息");
    }
    const resetData = () => {
        form.resetFields()
    }

    return (
        <div>
            <Title level={4}> 添加用户 </Title>
            <Row>
                <Col xs={18} sm={12} md={8} lg={6}>
                    <Form
                        name="basic"
                        labelCol={{ span: 24 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{
                            password: "qwe123"
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="用户名称"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item
                            label="手机号码"
                            name="phone"
                            rules={[
                                { required: true, message: '请输入手机号!' },
                                {
                                    pattern: reg.phone,
                                    message: '请输入正确的手机号码'
                                }
                            ]}
                        >

                            <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                        </Form.Item>
                        <Form.Item
                            label="登录密码"
                            name="password"
                            rules={[
                                { required: true, message: '请输入密码!' },
                                { pattern: reg.pwd, message: "请输入6-16位的数字加字母组合" }
                            ]}
                        >

                            <Input disabled prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
                        </Form.Item>
                        <Form.Item
                            label="用户身份"
                            name="role"
                            rules={[
                                { required: true, message: '请选择角色!' }
                            ]}
                        >

                            <Select placeholder="请选择用户身份"  >
                                {
                                    roleList.map((l, i) => {
                                        return (
                                            <Select.Option disabled={l.value >= userInfo?.role} value={l.value} key={i} >
                                                {l.text}
                                            </Select.Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item >
                            <Row>
                                <Col span={11} >
                                    <Button type="primary" block htmlType="submit"  > 添加用户</Button>
                                </Col>
                                <Col span={11} offset={2}>
                                    <Button type="default" block danger onClick={resetData} > 重置 </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}


export default observer(Adduser)